<template>
    <view class="info ph-20 mt-20">
        <view class="w-f pv-32 ph-32 b-24 background-white">
            <view class="f ai-c jc-s-b">
                <view>
                    <text class="fs-36 ml-8 text-color8">¥</text>
                    <text class="fs-48 fw-600 text-color8">{{detail.price}}</text>
                    <text class="fs-24 text-color3 old-price ml-16">原价 ¥{{detail.price+detail.discountPrice}}</text>
                </view>
                <view class="fs-22 text-color3">年售{{detail.salesCount||0}}+</view>
            </view>

            <view class="fs-36 fw-600 text-color4 mt-25">{{detail.name}}</view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { toRefs } from 'vue';
const props = defineProps({
    detail: {
        type: Object,
    }
});
const { detail } = toRefs(props);
</script>
<style lang="scss" scoped>
.info {
    .preferential {
        background: #fff5f5;
        line-height: 32rpx;
        display: inline-block;
    }
    .background-white {
        background: #fff;
    }
    .old-price {
        text-decoration: line-through;
    }
    .text-position {
        position: relative;
        top: 22rpx;
    }
    .text-psymbol {
        position: relative;
        top: 12rpx;
    }
}
</style>
